<template>
  <van-nav-bar
    title="在线支付"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <div class="paywarp">
    <div class="pay-list">
      <p class="pay-amount">
        应付金额: <span>￥{{ needPay }}</span>
      </p>
      <p class="pay-amount">
        订单编号：<span> {{ orderId }} </span>
      </p>
    </div>
    <div class="pay al" @click="pay(1)">
      <p>支付宝</p>
    </div>
    <div class="pay wx" @click="pay(2)">
      <p>微信</p>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { showToast } from "vant";
import { orderApi } from "@/api/index";
import { useRoute, useRouter } from "vue-router";
const route = useRoute(); //不带r的是获取当前页面url相关参数
const router = useRouter(); //代r的是负责页面跳转
const needPay = ref(0);
const orderId = ref();

onMounted(() => {
  orderId.value = route.query.id;
  needPay.value = Number(route.query.needPayAmount);
});
const pay = (payType: Number) => {
  if (payType === 1) {
    showToast("支付宝支付中...");
  } else {
    showToast("微信支付中...");
  }

  setTimeout(() => {
    orderApi.updateStatus
      .call({ id: orderId.value, status: 1 })
      .then((res: any) => {
        showToast("支付成功");
        router.push({ name: "order-list" });
      });
  }, 5000);
};

const onClickLeft = () => history.back();
</script>
<style scoped>
.paywarp {
  margin-top: 5rem;
}

.pay-amount {
  width: 100%;
  text-align: center;
}

.pay-amount span {
  color: tomato;
  font-weight: 200;
}

.pay {
  color: #fff;
  text-align: center;
  height: 50px;
  line-height: 50px;
  border-radius: 10px;
}

.al {
  background-color: #00aaef;
}

.wx {
  background-color: rgb(14, 146, 14);
}
</style>